<template>
  <div>
    <!-- 面包屑   -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a>动物管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>动物列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片    -->
    <el-card class="box-card">
      <el-table
        stripe
        highlight-current-row
        lazy
        :data="tableData"
        border
        style="width: 100%"
        height="calc( 100vh - 210px )"
      >
        <el-table-column
          label="序号"
          header-align="center"
          prop="id"
          width="60"
        />
        <el-table-column
          label="头像"
          prop="img"
          width="150"
          header-align="center"
        >
          <template v-slot="{ row }">
            <el-avatar
              :size="100"
              fit="fill"
              :src="baseURL + row.img[0]"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          header-align="center"
          width="120"
        />

        <el-table-column
          label="类型"
          header-align="center"
          prop="type"
          width="120"
        />

        <el-table-column label="详情" header-align="center" prop="detail">
          <template v-slot="{ row }">
            <p class="detail_text">{{ row.detail }}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template v-slot="{ row }">
            <!-- <el-button size="mini" @click="handleEdit(row.id)">编辑</el-button> -->
            <el-button size="mini" type="danger" @click="handleDelete(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageConfig.page"
      ref="change"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageConfig.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from '@/units/request.js';
import { getAnimalList, delAnimal, getType } from '@/api';
export default {
  data() {
    return {
      tableData: [],
      TypeData: [],
      total: 5,
      pageConfig: {
        page: 1,
        pageSize: 5,
      },
      baseURL: axios.defaults.baseURL,
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageConfig = {
        pageSize: val,
        page: 1,
      };
      getlist(this.pageConfig);
    },
    handleCurrentChange(val) {
      this.pageConfig = {
        pageSize: this.pageConfig.pageSize,
        page: val,
      };
      getlist(this.pageConfig);
    },
    handleEdit(id) {
      console.log(id);
      this.$router.push({
        path: '/layout/addarticle',
        query: { id },
      });
    },
    async handleDelete({ id }) {
      const res = await delAnimal({ id });
      if (res.data.code) {
        this.$message.success(res.data.msg);
        this.getlist();
      } else {
        this.$message.warning(res.data.msg);
      }
    },
    getariclelist(pageIndex, pageSize) {
      post({ pageIndex, pageSize }).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },
    async getlist(params) {
      const res = await getAnimalList(params);
      if (res.data.code === 1) {
        this.tableData = res.data.list.map((i) => ({
          ...i,
          type:
            this.TypeData.find((n) => n.typeId === i.typeId).type +
            `(${this.TypeData.find((n) => n.typeId === i.typeId).remarks})`,
        }));
        this.total = res.data.count;
      } else {
        this.$message.warning(res.data.msg);
      }
    },
    async gettypeList() {
      const res = await getType();
      if (res.data.code === 1) {
        this.TypeData = res.data.list;
      } else {
        this.$message.warning(res.data.msg);
      }
    },
  },
  async created() {
    await this.gettypeList();
    await this.getlist();
  },
};
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 20px;
}

.detail_text {
  /*这里要显示的设置宽度*/
  overflow: hidden;
  white-space: nowrap;
  /*文字超出宽度则显示ellipsis省略号*/
  text-overflow: ellipsis;
  width: 100%;
}
</style>
